<template>
	<div class="make">
		<!-- Make区域 -->
		<h3>待确认订单详情</h3>
		<hr/>
		<!-- 图片 商品名称 商品价钱 商品数量 商品总价 -->
		<el-table :data="makeList">
			<el-table-column label="图片" width="150">
				<template #default="scope">
					<img :src="`${$Imgurl}/api/public/showImg/${scope.row.pic}`"/>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="商品名称"  />
			<el-table-column prop="price" label="商品价钱" />
			<el-table-column label="商品数量" prop="num"></el-table-column>
			<el-table-column label="商品总价" >
				<template #default="scope">
					{{scope.row.num * scope.row.price}}
				</template>
			</el-table-column>
		</el-table>
		<div class="box_bottom">
			<el-tag style="margin-right: 1%;">总价钱:</el-tag>{{getSum}}
			<hr/>
			<div class="box_bottom_ce">
				<el-button type="primary">请输入收货地址</el-button>
				<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
				<br/>
				<el-button type="primary">请输入收货电话</el-button>
				<el-input placeholder="请输入地址" v-model="form.phone"></el-input>
			</div>
			<hr style="margin-bottom: 0;"/>
			<div class="box_bottom_bt">
				<template v-if="bol == 1">
					<el-button type="warning" @click="tocart()">重新选择</el-button>
					<el-button type="danger" @click="toFindAll()">下单</el-button>
				</template>
				<template v-if="bol == 2">
					<el-button type="success">订单下单成功,单号:{{form.ordid}}</el-button>
					<el-button type="danger" @click="toPay()">去付款</el-button>
				</template>
				
			</div>
			<hr/>
		</div>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Make',
		data(){
			return {
				makeList : [],
				bol : 1,
				form : {
					addr : '',
					ordid : '',
					phone : ''
				}
			}
		},
		created(){
			this.makeList = this.$store.state.tomake;
		},
		computed : {
			getSum(){
				let sum = 0;
				for( let i in this.makeList ){
					sum += (this.makeList[i].num * this.makeList[i].price);
				}
				return sum;
			}
		},
		methods:{
			tocart(){
				this.makeList = [];
				this.$router.push( '/home/cart' );
			},
			toFindAll(){
				if( this.form.addr != '' && this.form.phone != '' && this.getSum != 0 ){
					this.bol = 2;
					let newlist = [];
					let obj = {};
					for( let i in this.makeList ){
						obj = {};
						obj.bookid = this.makeList[i].bookid;
						obj.num = this.makeList[i].num;
						obj.price = this.makeList[i].price;
						newlist.push( obj );
					}
					instance.post( 'http://localhost:8093/api/fore/cart/addCart2Order' , newlist , {
						headers : { 'Content-Type' : 'application/json' }
					} ).then( (res)=>{
						// console.log(res.data.data.ordid);
						this.form.ordid = res.data.data.ordid;
						instance.post( 'http://127.0.0.1:8093/api/fore/ord/addAddr' , this.form , {
							headers : { 'Content-Type' : 'application/json' }
						} ).then( (res)=>{
							// console.log(res);
							
						} ).catch( (error)=>{
							console.log(error);
						} )
						
					} ).catch( (error)=>{
						console.log(error);
					} )
				}else{
					return false;
				}
			},
			toPay(){
				
				this.$router.push( {
					path : '/home/pay',
					query:{
						ordid : this.form.ordid,
						addr : this.form.addr,
						phone : this.form.phone
					}
				} );
			}
		}
	}
</script>

<style scoped>
	.make{
		position: absolute;
		top: 70px;
		width: 100%;
	}
	.make h3{
		margin-left: 5%;
	}
	.make hr{
		margin-bottom: 1.5%;
	}
	.el-table{
		width: 95%;
		text-align: center;
		margin-left: 2.5%;
		border: 1px solid gainsboro;
	}
	img{
		height: 80px;
		vertical-align: middle;
	}
	.box_bottom{
		width: 95%;
		height: 50px;
		line-height: 50px;
		margin-top: 1%;
		margin-left: 2.5%;
		float: left;
	}
	.box_bottom_bt{
		width: 100%;
		text-align: center;
	}
	.box_bottom_bt .el-button{
		margin-left: 5%;
		margin-right: 5%;
	}
	.box_bottom_ce{
		width: 100%;
	}
	.el-input{
		width: 88%;
	}
</style>
